기초코드와 코드도움을 이용한 화면 데이터 관리

데이터 성격과 갱신 주기 (1/3)

데이터의 성격과 갱신 주기에 따라 관리 방식을 다르게 접근합니다.

데이터 성격과 갱신 주기 (2/3)

• 시스템 데이터 (거의 변하지 않음)
  • 예: Y/N, 사용/미사용
  • 소스코드에 하드코딩하거나, 환경 설정 파일(syn.config.json)에 정의하여 관리합니다.

데이터 성격과 갱신 주기 (3/3)

• 업무 데이터 (수시로 변함)
  • 예: 고객 목록, 상품 카테고리, 공지사항 유형
  • 변경이 잦으므로 데이터베이스에 매번 직접 요청하여 데이터 변경을 위해 배포가 필요 없도록 하거나 원격 파일(JSON)을 통해 관리하여, 정기적으로 데이터 파일을 변경합니다.

코드 데이터 테이블 (1/2)

코드 데이터 테이블 (2/2)

코드 도움 데이터 테이블 (1/2)

코드 도움 데이터 테이블 (2/2)

코드 파일 확인하기 (1/4)

$(HANDSTACK_HOME)/modules/wwwroot/wwwroot/assets/shared/code/**

코드 파일 확인하기 (2/4)

{
    "Comment": "기초코드 데이터",
    "CodeColumnID": "CodeID",
    "ValueColumnID": "CodeValue",
    "CreatedAt": "2012-03-22 오후 2:00:00",
    "Scheme": [
        {
            "ColumnID": "SelectYN",
            "ColumnText": "기본선택여부",
            "HiddenYN": true
        },
        {
            "ColumnID": "LocaleID",
            "ColumnText": "언어권ID",

코드 파일 확인하기 (3/4)

            "HiddenYN": true
        },
        {
            "ColumnID": "CodeID",
            "ColumnText": "코드ID",
            "HiddenYN": false
        },
        {
            "ColumnID": "CodeValue",
            "ColumnText": "코드값",
            "HiddenYN": false
        }
    ],
    "DataSource": [

코드 파일 확인하기 (4/4)

        {
            "CodeID": "0",
            "CodeValue": "권한없음",
            "SelectYN": null,
            "LocaleID": "ko-KR"
        },
        {
            "CodeID": "1",
            "CodeValue": "권한존재",
            "SelectYN": null,
            "LocaleID": "ko-KR"
        }
    ]
}

HTML에서 선언적으로 데이터 연결하기 (1/2)

JavaScript 코드 없이 HTML 태그의 속성만으로 데이터 소스를 지정할 수 있습니다.

HTML에서 선언적으로 데이터 연결하기 (2/2)

<select id="ddlFileExtension" syn-options="{dataSourceID: 'CHP001',
storeSourceID: 'COM001',
parameters: '@GroupCode:COM001;',
local: false,
toSynControl: true,
required: false}"></select>

<syn_codepicker id="chpSubjectID" syn-options="{belongID: 'LD01',
dataSourceID: 'CHP005',
local: false,
isMultiSelect: false,
textBelongID: ['LD01', 'MD01'],
textDataFieldID: 'CODETEXT', controlText: '회사'}">
</syn_codepicker>

데이터 소스 유형별 예제: config (1/3) · 세부 1/3

<select id="ddlFileExtension" syn-options="{dataSourceID: 'CMM001',
**local: true**,
toSynControl: true,
required: false}"></select>

데이터 소스 유형별 예제: config (1/3) · 세부 2/3

...
config: {
    dataSource: {
        CMM001: {
            CodeColumnID: 'CodeID',
            ValueColumnID: 'CodeValue',
            DataSource: [
                {
                    CodeID: '0',
                    CodeValue: '권한없음'
                },
                {
                    CodeID: '1',
                    CodeValue: '권한존재'

데이터 소스 유형별 예제: config (1/3) · 세부 3/3

                }
            ]
        }
    }
}
...

데이터 소스 유형별 예제: transaction (3/3) (1/2)

<select id="ddlFileExtension" syn-options="{dataSourceID: 'CHP001',
storeSourceID: 'COM001',
parameters: '@GroupCode:COM001;',
local: false,
toSynControl: true,
required: false}"></select>

데이터 소스 유형별 예제: transaction (3/3) (2/2)

$(HANDSTACK_HOME)/modules/transact/module.json

• IsCodeDataCache: true
• CodeDataCacheTimeout: 20

캐시 초기화는 영향 범위를 확인한 실습 환경에서 수행합니다.
http://localhost:8421/transact/api/transaction/cache-clear?cacheKey=

그리드에 코드 데이터 적용하기 (1/2)

['ReturnType', '반환결과', 80, false, 'dropdown', false, 'left', null, {
    dataSourceID: 'ReturnType',
    required: true,
    local: true
}],
['I_COMPNAY_CATEGORY', '회사명', 170, false, 'dropdown', false, 'left','MD01', {
    dataSourceID: 'CHP001',
    storeSourceID: 'EZW024',
    parameters: '@GroupCode:EZW024;',
    local: false,
    validators: ['required']
}],
['USER_NAME', '직원명', 100, false, 'codehelp', false, 'left', 'MD01', {
    validators: ['required'],

그리드에 코드 데이터 적용하기 (2/2)

    dataSourceID: 'CHP001',
    parameters: '@DEPARTMENT_NO:;',
    local: false,
    codeColumnID: 'USER_ID',
    controlText: '직원조회',
    url: '/assets/shared/codehelp/index2.html'
}],